// store/modules/settings.ts

import { Module } from "vuex";

// 定义状态接口
interface SettingsState {
  dark: boolean;
}
console.log(`localStoreage.getItem('dark') = ${localStorage.getItem("dark")}`);

// 默认的本地设置
const localSettings = {
  dark: (() => {
    const storedValue = localStorage.getItem("dark");
    // 如果 storedValue 是 'true' 或 'false'，返回相应的布尔值；否则返回 false
    if (storedValue === "true") {
      return true;
    } else {
      return false; // 确保默认为亮色模式
    }
  })(),
};

// 定义模块
// eslint-disable-next-line
const settings: Module<SettingsState, any> = {
  namespaced: true,
  state: {
    dark: localSettings.dark ?? false,
  },
  mutations: {
    setDark(state, payload: boolean) {
      state.dark = payload;
      localStorage.setItem("dark", JSON.stringify(payload));
    },
  },
  actions: {
    setDark({ commit }, dark: boolean) {
      commit("setDark", dark); // 调用突变以更新状态
    },
    toggleDark({ commit, state }) {
      const newDarkState = !state.dark;
      commit("setDark", newDarkState); // 调用突变以更新状态
    },
  },
  getters: {
    isDark(state): boolean {
      return state.dark;
    },
  },
};

export default settings;
